<template>
  <div class="page light">
    <div class="header"
         :style="{'background-image': 'url(http://n.wenshendaka.com/static/img/bg_user.png)',height:topBannerHeight+'px'}">
      <div class="shade"></div>
    </div>
    <div class="block header-extra m-b">
      <div class="user-info">
        <div class="avatar-container">
          <div class="avatar-wrap" @click="goEdit">
            <div class="avatar" :style="{'background-image': 'url('+userInfo.avatar+')'}">

            </div>
          </div>
        </div>
        <div class="user-row">
          <div class="user-wrap">
            <div class="nickname">{{userInfo.nickname}}</div>
            <div class="user-badge-wrap">
              <!--<template v-for="badge of badges">-->
              <!--<img class="user-badge" v-if="userInfo[badge.id]&&badge.id=='bao'"-->
              <!--:src="  '/static/img/'+badge.icon+'.png'"/>-->
              <!--<img class="user-badge" v-if="userInfo[badge.id]&&badge.id!='bao'&&badge.id=='handicraft'"-->
              <!--:src="  '/static/img/'+badge.icon+'.png'"/>-->
              <!--<img class="user-badge"-->
              <!--v-if="userInfo[badge.id]&&badge.id!='bao'&&badge.id!='handicraft'&&badge.id=='realName'"-->
              <!--:src="  '/static/img/'+badge.icon+'.png'"/>-->
              <!--</template>-->
              <img class="user-badge"  v-if="getIcon(userInfo)" :src="  '/static/img/'+getIcon(userInfo)+'.png'"/>
              <div class="edit" @click="goEdit"></div>
            </div>
          </div>
        </div>
        <div class="follow"><span @click="goFollowings">关注{{userInfo.following_count}}</span><span @click="goFollowers">粉丝{{userInfo.follower_count}}</span>
        </div>
      </div>
    </div>

    <div class="table small group m-b font-s">
      <div class="row b-b" v-for="rowIndex of rowsCount" :style="{height:itemHeight+'px'}">
        <div class="column  item b-r h-100" v-for="columnIndex of columnCount"
             @click="clickItem(items[columnIndex+rowIndex*columnCount])">
          <div class="tips"
               v-if="items[columnIndex+rowIndex*columnCount].page.url == 'conversation' && isShowNoticeTip()"><span>{{notices_count > 99?'99':notices_count}}</span>
          </div>
          <div class="tips" v-if="items[columnIndex+rowIndex*columnCount].page.url == 'orders' && isShowOrderTip()">
            <span>{{order_count > 99?'99':order_count}}</span></div>

          <img :src="'http://n.wenshendaka.com/static/img/'+items[columnIndex+rowIndex*columnCount].icon+'.png'">
          <span> {{items[columnIndex+rowIndex*columnCount].title}}</span>
        </div>
      </div>
    </div>

    <div class=" row small renzheng m-b p-l font-s" v-if="userInfo.sector == 30">
      <label>认证情况</label>

      <div class=" badge" v-for="badge of badges" :class="[isBadgeOn(badge.id)?'on':'']"
           @click="clickBadge(badge)">
        <img :src="  '/static/img/'+badge.icon+(userInfo[badge.id]?'':'_un')+'.png'">
        <span> {{getBadgeTile(badge)}}</span>
      </div>
    </div>

    <div class="group small font-s">
      <div class="row h-l-m b-b p-h " @click="goKefu">
        <label>在线客服</label>
        <div class="more"></div>
      </div>

      <div class="row h-l-m p-h " @click="goSetting">
        <label>设置</label>

        <div class="more"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/babel">
  import {autoLogin} from '../store/actions'
  import {badges, isBadgeOn, clickBadge} from '../model/user'
  import {pageType} from  '../constant'

  var poller;

  export default{
    data () {
      return {
        items: [

          {
            title: '消息',
            icon: 'ic_huati',
            page: {
              url: 'conversation',
              type: pageType.NATIVE
            }
          },
          {
            title: '我的收藏',
            icon: 'ic_shouchang',
            page: {
              url: 'collection',
              type: pageType.NATIVE
            }
          },
          {
            title: '预约订单',
            icon: 'ic_dingdan',
            page: {
              url: 'orders',
              type: pageType.NATIVE
            }
          },
        ],

        badges: badges,

        topBannerHeight: document.body.clientWidth * 200 / 375,

        columnCount: 3,
        itemHeight: document.body.clientWidth / 3,

        ua: navigator.userAgent,
        isWsdk: window.isWsdk,

        notices_count: 0,
        order_count: 0,

      };
    },

    vuex: {
      getters: {
        userInfo: ({auth})=>auth.mineInfo,
        settings: ({auth})=>auth.settings
      },
      actions: {
        autoLogin
      }
    },

    route: {
      data(transition){
        this.autoLogin().then(() => {
          if (this.userInfo.sector == 30) {
            this.items = [{
              title: '我的作品集',
              icon: 'ic_zuopinji',
              page: {
                url: 'discography',
                type: pageType.NATIVE
              }
            },
              {
                title: '消息',
                icon: 'ic_huati',
                page: {
                  url: 'conversation',
                  type: pageType.NATIVE
                }
              },
              {
                title: '我的收藏',
                icon: 'ic_shouchang',
                page: {
                  url: 'collection',
                  type: pageType.NATIVE
                }
              },
              {
                title: '预约订单',
                icon: 'ic_dingdan',
                page: {
                  url: 'orders',
                  type: pageType.NATIVE
                }
              },
              {
                title: '收入',
                icon: 'ic_yue',
                page: {
                  url: 'http://n.wenshendaka.com/personalAccount/index.html',
                  type: pageType.THREE_PARTY
                }
              },
              {
                title: '店铺',
                icon: 'ic_dianpu',
                page: {
                  url: 'company',
                  type: pageType.NATIVE
                }
              }]
          }
          transition.next();
        })
      }
    },

    created(){
      wsdk.setOnRefresh(()=> {
        this.autoLogin().then(function () {
          wsdk.refreshFinish();
        });
      })
    },

    attached: function () {
      var self = this;
      if (poller)
        clearInterval(poller);
      poller = setInterval(function () {
        wsdk.getUnreadMessageCount((count) => {
          if (!count.notices_count) {
            if (count.notices_count == 0) {
              self.notices_count = count.notices_count;
            } else {
              self.notices_count = count;
            }
          } else {
            self.notices_count = count.notices_count;
          }

          self.order_count = count.order_count;
        });

      }, 500);

      wsdk.setOnResume(()=> {
        if (poller)
          clearInterval(poller);
        poller = setInterval(function () {
          wsdk.getUnreadMessageCount((count) => {
            if (!count.notices_count) {
              if (count.notices_count == 0) {
                self.notices_count = count.notices_count;
              } else {
                self.notices_count = count;
              }
            } else {
              self.notices_count = count.notices_count;
            }

            self.order_count = count.order_count;
          });

        }, 500);
      });

      setTimeout(()=> wsdk.setOnPause(function () {
        if (poller)
          clearInterval(poller);
      }), 0);

    },


    computed: {
      rowsCount: function () {
        return Math.ceil(this.items.length / this.columnCount);
      }
    },
    methods: {
      goEdit(){
        wsdk.go({url: 'userSetting', type: pageType.NATIVE});
      },
      goKefu(){
        wsdk.go({
          url: 'kefu',
          type: pageType.NATIVE,
          params: {userId: this.settings.kefuNum + '', userName: '客服'}
        });
      },

      goSetting(){
        wsdk.go({url: 'setting', type: pageType.NATIVE});
      },
      isBadgeOn (id) {
        return isBadgeOn(id, this.userInfo);
      },
      clickBadge (badge) {
        wsdk.go(badge.page);
      },

      clickItem(item){
        switch (item.page.url) {
          case 'company':
            if (this.userInfo.realName)
              if (this.userInfo.companyId)
                item.page.params = {
                  companyid: this.userInfo.companyId + ''
                };
              else {
                return wsdk.go({url: 'companyApplication', type: pageType.NATIVE});
              }
            else
              return wsdk.toast('请先实名认证!');
            break;
        }

        wsdk.go(item.page);
      },

      goFollowings(){
        wsdk.go({url: 'following', type: pageType.NATIVE, params: {userId: this.userInfo.userId + ''}});
      },

      goFollowers(){
        wsdk.go({url: 'follower', type: pageType.NATIVE, params: {userId: this.userInfo.userId + ''}});
      },

      isShowNoticeTip(){
        return this.notices_count && this.notices_count != 0;
      },

      isShowOrderTip(){
        return this.order_count && this.order_count != 0;
      },

      getBadgeTile(badge){

        if (badge.id == 'realName') {
          if (this.userInfo[badge.id])
            return '已实名认证';
          else
            return '未认证实名';
        } else if (badge.id == 'bao') {
          if (this.userInfo[badge.id])
            return '服务有保障';
          else
            return '服务未认证';
        } else if (badge.id == 'handicraft') {
          if (this.userInfo[badge.id])
            return '已认证手艺';
          else
            return '手艺未认证';
        }

      },

      getIcon(userInfo){

        if (userInfo.bao == 1) {
          return 'img_badge_bao';
        }
        if (userInfo.handicraft == 1) {
          return 'img_badge_v';
        }
        if (userInfo.realName == 1) {
          return 'img_badge_realname';
        }

        return null;
      }
    }
  }
</script>

<style lang="less" scoped>
  @import '../../static/less/compatible.less';

  .page {
    margin-top: 0;
  }

  .header {
    height: 200px;
    background-size: cover;
  }

  .header-extra {
    height: 85px;
  }

  .follow {
    font-size: 9px;
    color: #969696;
  }

  .follow > span {
    margin: 6px 5px;
    display: inline-block;
  }

  .nickname {
  }

  .user-info {
    display: -webkit-box;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;

    margin-top: -35px;
    position: absolute;
    text-align: center;
    width: 100%;
  }

  .avatar-wrap {
    height: 70px;
    width: 70px;
    border-radius: 35px;
    background-color: #fff;

    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;
  }

  .avatar-container {
    width: 100%;
    .flex();
    .justify-content(center);
  }

  .item {
    .justify-content(center);
    .align-items(center);
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    flex-direction: column;
    position: relative;
    .flex();
  }

  .item > * {
    display: block;
  }

  .item > img {
    width: 33px;
    height: 33px;
    margin-bottom: 12px;
  }

  .renzheng {
    height: 68px;
    .flex();
    .justify-content(center);
    .align-items(center);
  }

  .renzheng > label {
    margin-right: 15px;
  }

  .badge {
    width: 90px;
    height: 100%;

    .flex-grow(1);

    -webkit-box-pack: center;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    display: -webkit-box;
  }

  .badge > img {
    width: 60px;
    height: 20px;
    margin-bottom: 5px;
  }

  .badge > * {
    display: block;
  }

  .page {
    margin-bottom: 50px;
  }

  .user-wrap {
    margin-top: 5px;
    text-align: center;
    position: relative;
  }

  .user-wrap > * {
    display: inline-block;
  }

  .user-badge-wrap {
    position: absolute;
    margin-left: 5px;
  }

  .user-badge-wrap > * {
    width: 42px;
    height: 15px;
    display: inline-block;
    background-size: contain;
  }

  .user-badge {
    padding: 0 2px;
  }

  .edit {
    padding: 0;
    background-image: url(../../static/img/ic_user_edit.png);
    background-repeat: no-repeat;
  }

  .shade {
    height: 100%;
    background-image: url(../../static/img/shade_user.png);
    background-size: contain;
  }

  .tips {
    position: absolute;
    height: 15px;
    width: 15px;
    line-height: 15px;
    text-align: center;
    right: 20px;
    top: 20px;
    padding: 2px;
    background: #ff0000;
    border-radius: 15px;
    .flex();
    .justify-content(center);
    .align-items(center);
  }

  .tips > span {
    font-size: 9px;
    color: white;
    display: block;
  }
</style>
